<!DOCTYPE html>
<html lang="zh">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
	<meta name="author" content="小枫">
	<title>首页 | <%= data.title %></title>
	<link rel="shortcut icon" type="image/x-icon" href="<%= data.icon %>">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<link rel="stylesheet" type="text/css" href="/admin/css/materialdesignicons.min.css">
	<link rel="stylesheet" type="text/css" href="/admin/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/admin/css/style.min.css">
</head>

<body>
	<div class="container-fluid">

		<section class="row align-items-center">
			<div class="col-md-6 col-xl-3">
				<div class="card bg-primary bg-gradient text-white" style="--bs-bg-opacity: .6;">
					<div class="card-body p-3">
						<div class="progress-container d-flex align-items-center" style="gap: 8px;">
							<strong class="fs-6">CPU: </strong>
							<div class="progress w-100 position-relative" style="height: 1.5em;">
								<div id="cpuDom" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								<strong class="position-absolute top-50 text-white text-opacity-75" style="transform: translateY(-50%); left: 5px;" id="cpuText"></strong>
							</div>
						</div>
					</div>
				</div>
				<div class="card bg-purple bg-gradient text-white" style="--bs-bg-opacity: .6;">
					<div class="card-body p-3">
						<div class="progress-container d-flex align-items-center" style="gap: 8px;">
							<strong class="fs-6">EME: </strong>
							<div class="progress w-100 position-relative" style="height: 1.5em;">
								<div id="ramDom" class="progress-bar progress-bar-striped progress-bar-animated bg-purple" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								<strong class="position-absolute top-50 text-white text-opacity-75" style="transform: translateY(-50%); left: 5px;" id="ramText"></strong>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-2">
				<div class="card bg-success bg-gradient text-white">
					<div class="card-body">
						<div class="d-flex justify-content-between">
							<span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
								<i class="mdi mdi-link fs-4"></i>
							</span>
							<span class="fs-4" id="todayFriendsCount"></span>
						</div>
						<div class="text-end">今日友联</div>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-2">
				<div class="card bg-pink bg-gradient text-white">
					<div class="card-body">
						<div class="d-flex justify-content-between">
							<span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
								<i class="mdi mdi-ip-outline fs-4"></i>
							</span>
							<span class="fs-4" id="todayIP"></span>
						</div>
						<div class="text-end">今日IP</div>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-2">
				<div class="card bg-warning bg-gradient text-white">
					<div class="card-body">
						<div class="d-flex justify-content-between">
							<span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
								<i class="mdi mdi-update fs-4"></i>
							</span>
							<span class="fs-4">V1.0.4</span>
						</div>
						<div class="text-end">当前版本</div>
					</div>
				</div>
			</div>

			<div class="col-md-6 col-xl-3">
				<div class="card bg-primary bg-gradient text-white">
					<div class="card-body">
						<div class="d-flex justify-content-between">
							<span class="avatar-md avatar-box w-100 justify-content-start">
								<strong class="fs-5"><%= data.username %>, <span id="sayHello"></span></strong>
							</span>
						</div>
						<div class="fw-light">登陆时间: <span id="landingTime"></span></div>
					</div>
				</div>
			</div>

		</section>

		<div class="row h-200">

			<div class="col-md-7">
				<div class="card">
					<div class="card-header">
						<div class="card-title d-flex align-items-center">
							<img src="/admin/images/jieshao.svg" alt="jieshao" style="width: 1.5em;">
							<span class="fw-bold px-2">项目介绍</span>
						</div>
					</div>
					<div class="card-body" id="jieshao"></div>
				</div>
			</div>

			<div class="col-md-5">
				<div class="card">
					<div class="card-header">
						<div class="card-title d-flex align-items-center">
							<img src="/admin/images/fangwen.svg" alt="fangwen" style="width: 1.5em;">
							<span class="fw-bold px-2">访问IP</span>
						</div>
					</div>
					<div class="card-body">
						<canvas class="js-chartjs-lines"></canvas>
					</div>
				</div>
				<div class="card" id="advertising"></div>
			</div>

		</div>

	</div>

	<script type="text/javascript" src="/admin/js/jquery.min.js"></script>
	<script type="text/javascript" src="/admin/js/popper.min.js"></script>
	<script type="text/javascript" src="/admin/js/bootstrap.min.js"></script>
	<!--引入chart插件js-->
	<script type="text/javascript" src="/admin/js/chart.min.js"></script>
	<script type="text/javascript" src="/admin/js/main.min.js"></script>
	<script type="text/javascript" src="/admin/js/nitai5pro/main.js"></script>
</body>

</html>